<template>
  <div class="pieChartSecond">
    <div class="main"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
import loginAPI from "../../../api/basicfunction/basiclogin/loginAPI";

export default {
  name: 'pieChart2',
  methods: {
    init() {
      this.legendArr = this.myChart.getOption().series
      this.legendArr.forEach((data) => {
        data.selected = true;
      })
      this.$root.charts.push(this.myChart)
      window.addEventListener('resize', function () {
        this.myChart.resize()
      }.bind(this))
    }
  },
  mounted() {
    loginAPI.getData().then(({data}) => {
      this.myChart = echarts.init(document.querySelector('.pieChartSecond .main'));
      this.myChart.setOption({
        legend: {
          right: 'right',
          data: ['已出库', '未出库']
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}<br/>({d}%)'
        },
        toolbox: {
          show: true
        },
        color: ["#5470c6", "#91cc75", "#fac858"],
        series: [
          {
            type: 'pie',
            radius: [20, 90],
            center: ['30%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              {value: data.data.getTaskMavenStatusOne, name: '已出库'},
              {value: data.data.getTaskMavenStatusTwo, name: '未出库'}
            ]
          }
        ]
      })
    })
  }
}
</script>
<style>
.pieChartSecond {
  height: 290px;
  color: white;
}

.pieChartSecond .main {
  width: 100%;
  height: calc(100% - 10px);
  margin-top: -35px;
}
</style>
